<template>
    <el-container class="wrapper">
        <el-header> <Header /></el-header>
        <el-container>
            <el-header> <Menu :routes="routes" /></el-header>
            <el-main>
                <Main />
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import Header from './Header/index.vue';
import Menu from './Menu/index.vue';
import Main from './Main/index.vue';
import { routeConfigs } from '@/router/index';

export default {
    name: 'VerticalLayout',
    components: {
        Header,
        Menu,
        Main
    },
    data() {
        return {
            routes: routeConfigs
        }
    },
    created() {}
};
</script>

<style lang="scss" scoped>
.el-container {
    overflow: hidden;
    background: #f5f6fa;
    .el-main {
        padding: 10px;
    }
    .el-header {
        padding: 0;
    }
}
</style>
